proj-poverty Social Hack Day 36 2022-02-19
■タイムスケジュール（案）
11:50-12:10 自己紹介、PJの目的・現状の確認、質疑応答
12:10-12:30 ディスカッション①：開発の方向性（現状のインクルーシブチャートに対する各自の感想、進め方）
12:30-13:30 昼食
13:30-15:00 開発タイム①
データ収集チーム：データ収集、情報共有（特に国民の経済状態のデータ？）
インクルーシブチャート開発（データ追加？ 新機能？）
15:00-15:30 中間報告（全体）
15:30-16:15 開発タイム②：
上記の続き
16:15-17:00 ディスカッション②：今後の進め方
自己紹介
メンバーリスト（メンバーのニーズを共有しましょう！）
あいさつ or いきごみ
意識をすり合わせ、自分がまず行動する！！ プログラミング覚えていきます
絶版ですが、v2.0もあり、こちらはKindle版もあります
https://gyazo.com/5dbbc03c18b7352158ecb6fc2c5dd3c8
https://gyazo.com/800dd2e473875b60827097dd8ddeeabf
PJの目的、現状
プロジェクト概要 ：
社会をよりインクルーシブ（誰1人取り残さない、包摂的）にするために、ICTの力を活用しながら手と頭を動かすプロジェクト。現在は教育関係に注力しているが、公共的価値を共同生産するこのコミュニティを誰でも気軽に参加可能にできれば、このコミュニティ自体がインクルーシブな社会の1つの新しいパターンになりうるのでは。 現在のサブプロジェクト
※ざっくり今日やりたい作業
インクルーシブチャートに追加するデータの収集・検討
データ収集
データの重要ポイントの共有
データ組み立て（ペルソナへの割り当て）
集合体恐怖症問題
無機質だとキツイ
細かすぎず粗すぎない規則的な集合に嫌悪感を抱きやすい
毒蛇の模様や皮膚病などを想起するからという説もある
粗くする→大きなまとまりにする。境界をなくすとか
細かくする→ぷよぷよ、ピクミンのようなキャラクター？それぞれが微妙に違う方が良いが、モデル化・描画難しいかも
ksmesho.icon人型のアイコンは可能でしょうか？大きさと色分けで多様性は表現できる気はするけれども
インクルーシブチャートでデータ可視化する練習
GitHubアカウントを作ってリポジトリをForkする云々というのは今回は省略する
とにかく手元で動かせるようにする
macOSの場合
Windowsの場合
各種インストーラーがあります
gitとnvmをインストールしてください
共通
gitとnvmがインストールできたら…
code:bash
cd ~
# なんか質問が出たらyesと入力
cd inclusive-chart-vite
npm ci
npm run dev
こう表示されれば成功
https://gyazo.com/dcd982136ac3cfa27a280569ddc3378e
mtokura.icon↑ここまでできた！
yatta!!!yuiseki.iconyuiseki.icon
次のステップ：
「ファイル(F)」→「フォルダーを開く...」
ホームディレクトリにあるはずのinclusive-chart-viteフォルダを選択して開く
src/data/practice.jsonをいじってみて下さい
たとえば…
男性と女性の人口を調べて追加してみる
円を表示しているソースコード
src/components/AbstractBubbleChart.tsxの255行目
四角形に変えてみましたyuiseki.icon
git pullしてみてください
ksmesho.icon"rect"を"circle"にしてみましたが表示されませんでした
解決しました："circle"にするには"heght"と"width"を"r"にして、"x"、"y"を"cx"と"cy"にすればよかったですね
code:d3.js
svg
.selectAll("circle")
.data(data)
.join("circle")
.style("fill", (d) => onFillColor(d.color))
.style("stroke", "none")
.attr("cx", (d) => {
return (d.x = Math.max(30, Math.min(width - 30, d.x)));
})
.attr("cy", (d) => {
return (d.y = Math.max(30, Math.min(height - 30, d.y)));
})
.attr("r", (d) => onRadiusSize(d.radius))
ちょっとカオスなことしてみました
code:d3.js
svg
.selectAll("image")
.data(data)
.join("image")
.attr("x", (d) => {
return (d.x = Math.max(30, Math.min(width - 30, d.x))); // 画面からはみ出さないようにしている
})
.attr("y", (d) => {
return (d.y = Math.max(30, Math.min(height - 30, d.y))); // 画面からはみ出さないようにしている
})
.attr("width", (d) => onRadiusSize(d.radius*5))
.attr("height", (d) => onRadiusSize(d.radius*5))
src/data/practiceDim.json
編集後に画面をリロードする必要あり
colorValueのfooをblackからpinkに書き換えてみてください
xValueのdomainを["1", "2", "3", "4", "5", "6"]にしてみてください
src/data/practice.jsonのxValueを"1", "2", "3", "4", "5", "6"のいずれかにしてみてください
インクルーシブチャートの開発
データ追加（あれば）
新機能検討
100+1で自分を追加する？
自分vs社会？
スマホ対応検討
バブルのサイズを人数しか表現しないことにする？
古橋さんの案だと人数でまとめてバブルのサイズを変えているように見える
インクルーシブクイズどうするか？
今後の方向性のディスカッション
PJ名どうする問題
当初の貧困研究会→包摂研究会
仮決め
→Slackのチャンネル名変更Koichiro Shiratori.icon
高木さん or c4jの中の人
✅スキルの底上げ＆仲間を増やす
「誰でもプログラミング塾」（仮）：いまコードを書けない人も開発の話がわかる＆修正などを手伝えるようになるための自主勉強会、誰でも歓迎（あまり各自の負担にならないようにする）
https://gyazo.com/b1a4a2235b3f1b51fadfad16e262c899
学会発表
論文執筆
ここに載る実績を積んでいくイメージ
ゴール：誰かに触ってもらって考えや行動が変える
本当に変わるかどうかをちゃんと検証する
そのためには使える人を増やすために、スマホ向けの方をもっと作り込んでいく
スマホ向け：公式LINEアカウントからQRコードで発信してみるなど？外部のFBを得たい
プレスリリース？ （防窮訓練と同時？）
NHKの方にまた声をかけてみるyuiseki.icon
見た目を任意の形状にするyuiseki.icon
practiceを改善するyuiseki.icon
GitHubにおけるForkとPull requestの概念を説明して身に着けてもらうyuiseki.icon
結局データをどうするのかは、practiceを触って二週間後に議論する
![https://i.gyazo.com/b1a4a2235b3f1b51fadfad16e262c899.png")](https://i.gyazo.com/b1a4a2235b3f1b51fadfad16e262c899.png")){kind=link}